<template>
  <div class="legal-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">法律协议</h1>
          <p class="page-description">
            我们致力于保护用户权益，请仔细阅读以下法律文档
          </p>
        </div>
      </div>
    </section>

    <!-- 协议导航 -->
    <section class="legal-nav">
      <div class="container">
        <div class="nav-tabs">
          <div 
            class="nav-tab" 
            v-for="doc in legalDocs" 
            :key="doc.id"
            :class="{ active: selectedDoc === doc.id }"
            @click="selectDoc(doc.id)"
          >
            <div class="tab-icon">
              <el-icon><component :is="doc.icon" /></el-icon>
            </div>
            <div class="tab-content">
              <h3 class="tab-title">{{ doc.title }}</h3>
              <p class="tab-description">{{ doc.description }}</p>
              <span class="tab-updated">更新时间：{{ doc.updatedAt }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 协议内容 -->
    <section class="legal-content">
      <div class="container">
        <div class="content-layout">
          <!-- 侧边导航 -->
          <div class="content-sidebar">
            <div class="sidebar-sticky">
              <h3 class="sidebar-title">目录</h3>
              <ul class="content-outline">
                <li 
                  v-for="section in currentDoc?.sections" 
                  :key="section.id"
                  class="outline-item"
                  :class="{ active: activeSection === section.id }"
                  @click="scrollToSection(section.id)"
                >
                  <a href="#" @click.prevent>{{ section.title }}</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- 主要内容 -->
          <div class="content-main">
            <div class="document-header">
              <h1 class="document-title">{{ currentDoc?.title }}</h1>
              <div class="document-meta">
                <span class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  生效日期：{{ currentDoc?.effectiveDate }}
                </span>
                <span class="meta-item">
                  <el-icon><Refresh /></el-icon>
                  最后更新：{{ currentDoc?.updatedAt }}
                </span>
                <span class="meta-item">
                  <el-icon><Document /></el-icon>
                  版本：{{ currentDoc?.version }}
                </span>
              </div>
            </div>

            <div class="document-content">
              <div 
                v-for="section in currentDoc?.sections" 
                :key="section.id"
                :id="`section-${section.id}`"
                class="content-section"
              >
                <h2 class="section-title">{{ section.title }}</h2>
                <div class="section-content" v-html="section.content"></div>
              </div>
            </div>

            <!-- 文档操作 -->
            <div class="document-actions">
              <el-button @click="printDocument">
                <el-icon><Printer /></el-icon>
                打印文档
              </el-button>
              <el-button @click="downloadPDF">
                <el-icon><Download /></el-icon>
                下载PDF
              </el-button>
              <el-button type="primary" @click="acceptAgreement" v-if="currentDoc?.requiresAcceptance">
                <el-icon><Check /></el-icon>
                我已阅读并同意
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 相关链接 -->
    <section class="related-links">
      <div class="container">
        <h2 class="section-title">相关链接</h2>
        <div class="links-grid">
          <div class="link-card" v-for="link in relatedLinks" :key="link.id">
            <div class="link-icon">
              <el-icon><component :is="link.icon" /></el-icon>
            </div>
            <div class="link-content">
              <h3 class="link-title">{{ link.title }}</h3>
              <p class="link-description">{{ link.description }}</p>
              <el-button text type="primary" @click="openLink(link.url)">
                了解更多 <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
      <div class="container">
        <div class="contact-content">
          <div class="contact-text">
            <h2 class="contact-title">有疑问？联系我们</h2>
            <p class="contact-description">
              如果您对我们的法律协议有任何疑问，请随时联系我们的法务团队
            </p>
            <div class="contact-info">
              <div class="info-item">
                <el-icon><Message /></el-icon>
                <span>legal@ikeysoft.cn</span>
              </div>
              <div class="info-item">
                <el-icon><Phone /></el-icon>
                <span>400-123-4567</span>
              </div>
              <div class="info-item">
                <el-icon><Clock /></el-icon>
                <span>工作日 9:00-18:00</span>
              </div>
            </div>
          </div>
          <div class="contact-actions">
            <el-button type="primary" size="large" @click="goToContact">
              联系法务团队
            </el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  Document,
  Shield,
  User,
  Setting,
  Calendar,
  Refresh,
  Printer,
  Download,
  Check,
  ArrowRight,
  Message,
  Phone,
  Clock,
  InfoFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const selectedDoc = ref('user-agreement')
const activeSection = ref('')

// 法律文档数据
const legalDocs = [
  {
    id: 'user-agreement',
    title: '用户服务协议',
    description: '规定用户与IKeySoft之间的权利义务关系',
    icon: 'User',
    updatedAt: '2024-01-15',
    effectiveDate: '2024-01-01',
    version: 'v2.1',
    requiresAcceptance: true,
    sections: [
      {
        id: 'general',
        title: '1. 总则',
        content: `
          <p>1.1 本协议是您与北京爱科软件技术有限公司（以下简称"IKeySoft"或"我们"）之间关于使用IKeySoft提供的软件产品和服务的法律协议。</p>
          <p>1.2 通过注册、下载、安装、启动、登录或以其他方式使用IKeySoft的产品和服务，您表示同意接受本协议的全部条款和条件。</p>
          <p>1.3 如果您不同意本协议的任何条款，请不要使用我们的产品和服务。</p>
          <p>1.4 我们保留随时修改本协议的权利。修改后的协议将在我们的网站上公布，并自公布之日起生效。</p>
        `
      },
      {
        id: 'services',
        title: '2. 服务内容',
        content: `
          <p>2.1 IKeySoft为用户提供企业管理软件、数据分析平台、云计算服务等产品和相关技术支持服务。</p>
          <p>2.2 我们的服务包括但不限于：</p>
          <ul>
            <li>软件产品的使用许可</li>
            <li>技术支持和维护服务</li>
            <li>数据存储和处理服务</li>
            <li>培训和咨询服务</li>
          </ul>
          <p>2.3 具体服务内容以您购买的产品套餐为准。</p>
        `
      },
      {
        id: 'user-obligations',
        title: '3. 用户义务',
        content: `
          <p>3.1 您应当按照本协议和相关法律法规使用我们的产品和服务。</p>
          <p>3.2 您不得将我们的产品和服务用于任何非法目的或以任何非法方式使用。</p>
          <p>3.3 您应当保护好自己的账户信息，不得将账户转让给他人使用。</p>
          <p>3.4 您应当及时支付相关费用，逾期付款可能导致服务暂停。</p>
        `
      },
      {
        id: 'intellectual-property',
        title: '4. 知识产权',
        content: `
          <p>4.1 IKeySoft拥有其提供的软件产品的全部知识产权，包括但不限于著作权、商标权、专利权等。</p>
          <p>4.2 未经我们书面同意，您不得复制、修改、分发、销售或以其他方式使用我们的知识产权。</p>
          <p>4.3 您在使用我们的服务过程中产生的数据归您所有，但我们有权按照隐私政策使用这些数据。</p>
        `
      },
      {
        id: 'liability',
        title: '5. 责任限制',
        content: `
          <p>5.1 我们将尽力确保服务的稳定性和安全性，但不保证服务不会中断或完全没有错误。</p>
          <p>5.2 除法律明确规定外，我们不承担因使用我们的产品和服务而产生的任何间接、偶然、特殊或后果性损害。</p>
          <p>5.3 我们的总责任不超过您在过去12个月内支付给我们的费用总额。</p>
        `
      },
      {
        id: 'termination',
        title: '6. 协议终止',
        content: `
          <p>6.1 您可以随时停止使用我们的服务并终止本协议。</p>
          <p>6.2 如果您违反本协议的任何条款，我们有权立即终止向您提供服务。</p>
          <p>6.3 协议终止后，您应当停止使用我们的产品和服务，并删除相关软件。</p>
        `
      }
    ]
  },
  {
    id: 'privacy-policy',
    title: '隐私政策',
    description: '说明我们如何收集、使用和保护您的个人信息',
    icon: 'Shield',
    updatedAt: '2024-01-10',
    effectiveDate: '2024-01-01',
    version: 'v1.8',
    requiresAcceptance: false,
    sections: [
      {
        id: 'overview',
        title: '1. 概述',
        content: `
          <p>1.1 IKeySoft非常重视用户的隐私保护。本隐私政策说明了我们如何收集、使用、存储和保护您的个人信息。</p>
          <p>1.2 通过使用我们的产品和服务，您同意我们按照本隐私政策处理您的个人信息。</p>
          <p>1.3 我们承诺遵守相关法律法规，包括《网络安全法》、《数据安全法》、《个人信息保护法》等。</p>
        `
      },
      {
        id: 'collection',
        title: '2. 信息收集',
        content: `
          <p>2.1 我们可能收集以下类型的信息：</p>
          <ul>
            <li><strong>账户信息：</strong>用户名、邮箱地址、电话号码等</li>
            <li><strong>使用信息：</strong>登录记录、操作日志、功能使用情况等</li>
            <li><strong>设备信息：</strong>设备型号、操作系统、浏览器类型等</li>
            <li><strong>业务信息：</strong>您在使用我们服务时输入的业务数据</li>
          </ul>
          <p>2.2 我们通过以下方式收集信息：</p>
          <ul>
            <li>您主动提供的信息</li>
            <li>自动收集的使用数据</li>
            <li>第三方合作伙伴提供的信息</li>
          </ul>
        `
      },
      {
        id: 'usage',
        title: '3. 信息使用',
        content: `
          <p>3.1 我们使用收集的信息用于：</p>
          <ul>
            <li>提供和改进我们的产品和服务</li>
            <li>处理您的请求和交易</li>
            <li>发送重要通知和更新</li>
            <li>进行数据分析和产品优化</li>
            <li>防范安全威胁和欺诈行为</li>
          </ul>
          <p>3.2 我们不会将您的个人信息用于本政策未明确说明的其他目的。</p>
        `
      },
      {
        id: 'sharing',
        title: '4. 信息共享',
        content: `
          <p>4.1 我们不会向第三方出售、交易或转让您的个人信息。</p>
          <p>4.2 在以下情况下，我们可能会共享您的信息：</p>
          <ul>
            <li>获得您的明确同意</li>
            <li>法律法规要求或政府部门要求</li>
            <li>为保护我们或他人的合法权益</li>
            <li>与可信的第三方服务提供商合作（在严格的保密协议下）</li>
          </ul>
        `
      },
      {
        id: 'security',
        title: '5. 信息安全',
        content: `
          <p>5.1 我们采用行业标准的安全措施保护您的个人信息：</p>
          <ul>
            <li>数据加密传输和存储</li>
            <li>访问控制和身份验证</li>
            <li>定期安全审计和漏洞扫描</li>
            <li>员工安全培训和保密协议</li>
          </ul>
          <p>5.2 尽管我们采取了合理的安全措施，但无法保证信息的绝对安全。</p>
        `
      },
      {
        id: 'rights',
        title: '6. 您的权利',
        content: `
          <p>6.1 您对自己的个人信息享有以下权利：</p>
          <ul>
            <li>查询和获取您的个人信息</li>
            <li>更正不准确的个人信息</li>
            <li>删除您的个人信息</li>
            <li>限制或反对信息处理</li>
            <li>数据可携带权</li>
          </ul>
          <p>6.2 如需行使这些权利，请通过本页面底部的联系方式与我们联系。</p>
        `
      }
    ]
  },
  {
    id: 'service-terms',
    title: '服务条款',
    description: '详细说明我们提供的各项服务的具体条款',
    icon: 'Setting',
    updatedAt: '2024-01-08',
    effectiveDate: '2024-01-01',
    version: 'v1.5',
    requiresAcceptance: false,
    sections: [
      {
        id: 'service-scope',
        title: '1. 服务范围',
        content: `
          <p>1.1 IKeySoft提供以下类型的服务：</p>
          <ul>
            <li><strong>软件即服务(SaaS)：</strong>基于云端的软件应用服务</li>
            <li><strong>平台即服务(PaaS)：</strong>应用开发和部署平台</li>
            <li><strong>基础设施即服务(IaaS)：</strong>计算、存储、网络等基础设施服务</li>
            <li><strong>专业服务：</strong>咨询、实施、培训等专业服务</li>
          </ul>
        `
      },
      {
        id: 'service-levels',
        title: '2. 服务等级',
        content: `
          <p>2.1 我们承诺提供以下服务等级：</p>
          <ul>
            <li><strong>可用性：</strong>99.9%的月度可用性保证</li>
            <li><strong>响应时间：</strong>关键问题4小时内响应</li>
            <li><strong>数据备份：</strong>每日自动备份，保留30天</li>
            <li><strong>安全监控：</strong>7x24小时安全监控</li>
          </ul>
          <p>2.2 如未达到承诺的服务等级，我们将提供相应的服务补偿。</p>
        `
      },
      {
        id: 'maintenance',
        title: '3. 维护和更新',
        content: `
          <p>3.1 我们会定期对系统进行维护和更新：</p>
          <ul>
            <li>计划维护将提前48小时通知</li>
            <li>紧急维护将尽快通知用户</li>
            <li>功能更新将自动部署</li>
            <li>安全补丁将及时安装</li>
          </ul>
        `
      }
    ]
  },
  {
    id: 'disclaimer',
    title: '免责声明',
    description: '说明我们服务的限制和免责条款',
    icon: 'InfoFilled',
    updatedAt: '2024-01-05',
    effectiveDate: '2024-01-01',
    version: 'v1.2',
    requiresAcceptance: false,
    sections: [
      {
        id: 'general-disclaimer',
        title: '1. 一般免责',
        content: `
          <p>1.1 我们的服务按"现状"提供，不提供任何明示或暗示的保证。</p>
          <p>1.2 我们不保证服务不会中断、没有错误或完全安全。</p>
          <p>1.3 用户使用我们的服务所产生的风险由用户自行承担。</p>
        `
      },
      {
        id: 'limitation',
        title: '2. 责任限制',
        content: `
          <p>2.1 在法律允许的最大范围内，我们不承担以下责任：</p>
          <ul>
            <li>间接、偶然、特殊或后果性损害</li>
            <li>利润损失、数据丢失或业务中断</li>
            <li>第三方行为造成的损害</li>
            <li>不可抗力因素造成的损害</li>
          </ul>
        `
      }
    ]
  }
]

// 相关链接
const relatedLinks = [
  {
    id: 1,
    title: '安全中心',
    description: '了解我们的安全措施和最佳实践',
    icon: 'Shield',
    url: '/security'
  },
  {
    id: 2,
    title: '帮助中心',
    description: '查找常见问题的答案和使用指南',
    icon: 'Document',
    url: '/help'
  },
  {
    id: 3,
    title: '开发者文档',
    description: 'API文档和开发者资源',
    icon: 'Setting',
    url: '/docs'
  }
]

// 计算属性
const currentDoc = computed(() => {
  return legalDocs.find(doc => doc.id === selectedDoc.value)
})

// 方法
const selectDoc = (docId: string) => {
  selectedDoc.value = docId
  activeSection.value = ''
  nextTick(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  })
}

const scrollToSection = (sectionId: string) => {
  activeSection.value = sectionId
  const element = document.getElementById(`section-${sectionId}`)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const printDocument = () => {
  window.print()
}

const downloadPDF = () => {
  // PDF下载逻辑
  console.log('下载PDF')
}

const acceptAgreement = () => {
  // 接受协议逻辑
  console.log('用户已接受协议')
  // 这里可以发送API请求记录用户接受协议的时间
}

const openLink = (url: string) => {
  if (url.startsWith('http')) {
    window.open(url, '_blank')
  } else {
    router.push(url)
  }
}

const goToContact = () => {
  router.push('/contactus')
}

// 监听滚动事件，更新活动章节
const handleScroll = () => {
  if (!currentDoc.value) return
  
  const sections = currentDoc.value.sections
  let currentSection = ''
  
  for (const section of sections) {
    const element = document.getElementById(`section-${section.id}`)
    if (element) {
      const rect = element.getBoundingClientRect()
      if (rect.top <= 100) {
        currentSection = section.id
      }
    }
  }
  
  if (currentSection) {
    activeSection.value = currentSection
  }
}

// 生命周期
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.legal-page {
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 8rem 0 4rem;
  color: white;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 协议导航 */
.legal-nav {
  padding: 4rem 0;
  background: white;
}

.nav-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.nav-tab {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.nav-tab:hover,
.nav-tab.active {
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.tab-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tab-content {
  flex: 1;
}

.tab-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.tab-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.tab-updated {
  font-size: 0.9rem;
  color: #999;
}

/* 协议内容 */
.legal-content {
  padding: 4rem 0;
  background: #f8fafc;
}

.content-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

/* 侧边导航 */
.content-sidebar {
  position: sticky;
  top: 2rem;
}

.sidebar-sticky {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.content-outline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.outline-item {
  margin-bottom: 0.5rem;
}

.outline-item a {
  display: block;
  padding: 0.5rem 0.8rem;
  color: #666;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.outline-item:hover a,
.outline-item.active a {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

/* 主要内容 */
.content-main {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.document-header {
  padding: 2rem;
  border-bottom: 1px solid #e2e8f0;
}

.document-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.document-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.document-content {
  padding: 2rem;
}

.content-section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #667eea;
}

.section-content {
  line-height: 1.8;
  color: #555;
}

.section-content p {
  margin-bottom: 1rem;
}

.section-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.section-content li {
  margin-bottom: 0.5rem;
}

.section-content strong {
  color: #333;
  font-weight: 600;
}

/* 文档操作 */
.document-actions {
  padding: 2rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 相关链接 */
.related-links {
  padding: 6rem 0;
  background: white;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.link-card {
  display: flex;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.link-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}

.link-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.link-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.link-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* 联系我们 */
.contact-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.contact-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.contact-description {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.contact-info {
  display: grid;
  gap: 1rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .nav-tabs {
    grid-template-columns: 1fr;
  }

  .content-layout {
    grid-template-columns: 1fr;
  }

  .content-sidebar {
    order: 2;
    position: static;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .contact-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .nav-tab {
    flex-direction: column;
    text-align: center;
  }

  .document-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .document-actions {
    flex-direction: column;
  }

  .link-card {
    flex-direction: column;
    text-align: center;
  }

  .contact-info {
    justify-items: center;
  }
}
</style>